<template>
  <scroll-view
    scroll-y
    :refresher-enabled="true"
    :refresher-triggered="refreshOpt.triggered"
    :refresher-threshold="100"
    refresher-background="#F5F5F5"
    @scrolltolower="loadMore"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
  >
    <slot></slot>
  </scroll-view>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    offset?: number
    scrollHeight?: string
    firstEnterReq?: boolean
  }>(),
  {
    offset: 0,
    scrollHeight: '',
    firstEnterReq: false,
  },
)

const height = computed(() => {
  // TODO 134 不知道咋来的。。。。没时间，后续处理
  // return `calc(100vh - ${(props.offset || 0) + 134}rpx)`;
})

const emit = defineEmits(['loadMore', 'refresh'])

const refreshOpt = reactive<{
  triggered: boolean | 'restore'
  _freshing: boolean
}>({
  triggered: true,
  _freshing: false,
})

const loadMore = () => {
  emit('loadMore')
}

// 自定义下拉刷新被触发
const onRefresh = () => {
  refreshOpt.triggered = true

  if (refreshOpt._freshing) {
    return
  }

  refreshOpt._freshing = true
  emit('refresh')

  setTimeout(() => {
    refreshOpt.triggered = false
    refreshOpt._freshing = false
  }, 100)
}

// 自定义下拉刷新被复位
const onRestore = () => {
  refreshOpt.triggered = false // 需要重置
}
</script>

<style lang="scss" scoped></style>
